{extend name="layouts/iframe" /}

{block name="pagecss"}
<style>
    .layui-col-sm4 {
        height: 300px;
    }
</style>
{/block}

{block name="content"}
<div class="layui-fluid">
    <div class="layui-card">
        <!--<div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <form class="layui-form">
                <div class="layui-form-item searchBox">

                </div>
            </form>
        </div>-->

        <div class="layui-card-body">
            <div id="table-box" class="layui-row layui-col-space30 layui-table-box">

            </div>

            <div class="layui-table-page">
                <div id="table-page"></div>
            </div>
        </div>

        <div class="layui-form-item layui-layout-admin">
            <div class="layui-input-block">
                <div class="layui-footer" style="left: 0;">
                    <!--<button type="button" class="layui-btn layui-btn-primary close-btn">取消</button>-->
                    <button type="button" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="layConfirm">确认 <i class="layui-icon layui-icon-ok"></i></button>
                </div>
            </div>
        </div>
    </div>
</div>

<input type="hidden" class="filelist_url" value="{{:url('/iframe/selectFiles')}}">
{/block}

{block name="pagescript"}
<script type="text/javascript">
    layui.use(['form', 'layer', 'table', 'viewer'], function () {

        var form = layui.form,
            layer = parent.layer === undefined ? layui.layer : top.layer,
            $ = layui.jquery,
            table = layui.table;

        var Viewer = layui.viewer;

        var filelist_url = $('.filelist_url').val();


        var page = 1,
            length = 6,
            table_params = {};
        function tablePage(p, limit, data) {
            var loading = layer.load(2);
            if (!p) {
                p = page;
            }
            if (!limit) {
                limit = length;
            }
            if (!data) {
                data = table_params;
            }
            data.page = p;
            data.limit = limit;

            var url = $('.filelist_url').val();
            layui.$.post(url, data, function (res) {
                layer.close(loading);
                if (res.status == 1) {
                    layui.$('#table-box').html(res.html);
                    layui.form.render();

                    layui.laypage.render({
                        elem: 'table-page',
                        count: res.count,
                        limit: limit,
                        curr: p,
                        prev: '<i class="layui-icon layui-icon-left"></i>',
                        next: '<i class="layui-icon layui-icon-right"></i>',
                        layout: ['first', 'prev', 'page', 'next', 'last', 'limit', 'skip'],
                        limits: [10, 20, 30, 50, 100, 200],
                        jump: function (obj, first) {
                            var _p = obj.curr;
                            var _limit = obj.limit;
                            if (!first) {
                                tablePage(_p, _limit, data);
                            }
                        }
                    });
                } else {
                    layui.layer.msg(res.msg);
                }
            });
        }

        tablePage();

        // 确认选中
        form.on("submit(layConfirm)", function (data) {
            console.log(11);
            /*layer.msg('选择成功', {icon: 1, time: 1000});
            var index = parent.layer.getFrameIndex(window.name);
            layer.close(index);*/
        });
    });
</script>
{/block}